<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<view></view>
				<view class="u-f-40 common-title">{{ lang_tabbar.personal }}</view>
				<message-btn></message-btn>
			</view>

			<!-- 头像信息 -->
			<view class="flex-center-between u-m-t-10" style="position: relative; overflow-x: hidden;">
				<view class="flex-center u-p-l-56"
					@click="jumpUrl(`/pages/user/personal/index/index?userId=${ userInfo.userId }`)">
					<view class="u-radius-60 clear-flex" style="width: 99rpx; height: 99rpx;border: 2rpx solid #FFFFFF">
						<x-image :src="showImage(userInfo.avatar, 'logo')"/>
					</view>

					<view class="u-m-l-12">
						<view class="u-f-34 u-lh-48 font-medio color-white">{{ userInfo.nick || '' }}</view>
						<view class="u-f-28 u-lh-40 flex-center" @click.stop="copyContent(userInfo.no)">
							<view class="u-m-r-10">{{ lang_personal.userId }}:</view>
							<view class="u-m-r-6">{{ userInfo.no || '' }}</view>
							<image src="@/static/image/common/arrow_right.png" style="width: 12rpx; height: 20rpx;"
								class="clear-flex"></image>
						</view>
					</view>
				</view>

				<view class="sign-btn" :style="{
					transform: `translateX(${ !signStatus ? 0 : '100%' })`
				}" @click="signAction">
					<view class="flex-center">
						<image src="@/static/image/personal/sign_icon@2x.png" style="width: 38rpx; height: 40rpx;"
							class="clear-flex"></image>
						<view class="u-m-l-8 u-f-28 u-lh-40 font-bold">{{ lang_personal.sign }}</view>
					</view>
				</view>
			</view>

			<!-- 积分收藏 -->
			<view style="padding: 30rpx 40rpx 0;">
				<view class="header-card">
					<view @click="jumpUrl('/pages/user/personal/balance/index/index')">
						<view class="u-p-t-22">{{ lang_personal.myBalance }}</view>
						<view class="u-m-t-8 flex-center-between">
							<view class="u-f-52 u-lh-60 font-bold"
								>{{ formatMoney }}</view>
							<x-common-btn width="136" height="54">
								<view class="u-f-24 u-lh-34 linecamp-1">{{ lang_personal.clickWatch }}</view>
							</x-common-btn>
						</view>
					</view>

					<view style="padding: 34rpx 0;">
						<view class="flex-center-between u-text-center">
							<view v-for="(item, index) in headerNavs" :key="index"
								:class="[index > 0 ? 'header-nav u-p-l-28' : '']" 
								style="width: calc(100% / 4);" @click="jumpUrl(item.page)">
								<view class="u-f-36 u-lh-42 font-bold">
									<template v-if="item.key === 'score'">{{ integral || 0 }}</template>
									<template v-else-if="item.key === 'shopCart'">{{ cartCount || 0 }}</template>
									<template
										v-else-if="item.key === 'myCollect'">{{ userData.collectCount || 0 }}</template>
									<template
										v-else-if="item.key === 'collage'">{{ userData.waitPinCount || 0 }}</template>
								</view>
								<view class="u-m-t-4 u-f-24 u-lh-34 color-grew linecamp-1">{{ lang_personal[item.key] }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view style="padding: 130rpx 40rpx 0;">
			<view class="nav-card">
				<view class="flex-center-between">
					<view>{{ lang_personal.myOrder }}</view>
					<x-see-more :content="lang_personal.allOrder" @click="jumpUrl('/pages/user/order/list/list')">
					</x-see-more>
				</view>

				<view class="flex-center-between u-text-center u-p-t-30">
					<view v-for="(item, index) in orders" :key="index" class="linecamp-1"
					style="width: calc(100% / 5);"
						@click="jumpUrl('/pages/user/order/list/list?type=' + item.key)">
						<image :src="dealImg(item.key)" style="width: 44rpx;height: 44rpx" mode="heightFix"></image>
						<view class="u-m-t-4 u-f-24 u-lh-34 linecamp-1">{{ lang_personal[item.key] }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 个人中心 -->
		<view style="padding: 20rpx 40rpx 0;">
			<view class="nav-card">
				<view>{{ lang_personal.myCenter }}</view>

				<u-row class="flex-center-between ">
					<u-col
						v-if="(item.key !== 'applyShop' && item.key !== 'transform') || (item.key === 'applyShop' && approveStatus !== 1) || (item.key === 'transform' && approveStatus === 1)"
						v-for="(item, index) in settings" :key="index" :span="3">
						<view class="u-text-center u-p-t-30 u-p-b-16" @click="changePersonConfig(item)">
							<image :src="dealImg(item.key)" style="width: 52rpx;height: 52rpx" mode="heightFix"></image>
							<view class="u-m-t-10 u-f-24 u-lh-34 linecamp-1">{{ lang_personal[item.labelKey || item.key] }}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<!-- 留空 -->
		<view style="height: 200rpx;"></view>
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import {
		userInitMerchant,
		merchantLastApproveInfo
	} from '@/api/personal.js'
	export default {
		data() {
			// 初始化头部导航
			let headerNavs = [{
					key: 'score',
					label: '积分',
					page: '/pages/user/personal/score/score'
				},
				{
					key: 'myCollect',
					label: '我的收藏',
					page: '/pages/user/personal/collect/collect'
				},
				{
					key: 'shopCart',
					label: '购物车',
					page: '/pages/user/shop/cart/cart'
				},
				{
					key: 'collage',
					label: '待拼团',
					page: '/pages/user/order/list/list?type=waitCollage'
				}
			]
			// 初始化订单导航
			let orders = [{
					key: 'pendingPayment',
					label: '待付款'
				},
				{
					key: 'delivery',
					label: '待发货'
				},
				{
					key: 'receivedGoods',
					label: '待收货'
				},
				{
					key: 'beEvaluate',
					label: '待评价'
				},
				{
					key: 'refundSaled',
					label: '退款/售后'
				}
			]

			// 初始化个人中心导航
			let settings = [{
					key: 'head',
					label: '团长',
					page: '/pages/user/personal/head/head'
				},
				{
					key: 'extension',
					label: '推广',
					page: '/pages/user/personal/extension/list/list'
				},
				{
					key: 'address',
					label: '地址管理',
					page: '/pages/user/address/list/list'
				},
				{
					key: 'collage',
					labelKey: 'subscribe',
					label: '预约列表',
					page: '/pages/user/comerciante/subscribe/list/list'
				},
				{
					key: 'statement',
					label: '平台声明',
					page: '/pages/other/richText/richText?type=statement'
				},
				{
					key: 'coupon',
					label: '优惠券',
					page: '/pages/user/personal/coupon/index/index'
				},
				{
					key: 'reply',
					label: '意见反馈',
					page: '/pages/common/reply/reply'
				},
				{
					key: 'applyShop',
					label: '申请为商家',
					page: '/pages/common/saveShop/saveShop?type=applyShop'
				},
				{
					key: 'contact',
					label: '客服热线',
					page: ''
				},
				// {
				// 	key: 'policy',
				// 	label: '隐私政策',
				// 	page: '/pages/other/richText/richText?type=privacy'
				// },
				{
					key: 'setting',
					label: '设置',
					page: '/pages/user/setting/index/index'
				},
				{
					key: 'transform',
					labelKey: 'transformShop',
					label: '切换商家端',
					page: ''
				},
			]
			return {
				headerNavs,
				orders,
				settings,
				
				approveStatus: null,
				timer: null,
				
				settingValue: ''
			}
		},
		computed: {
			formatMoney() {
				let balance = this.balance
				balance = (balance || 0).toFixed(2)
				let intNumber = balance.split('.')[0]
				let floatNumber = balance.split('.')[1]
				let str = ''
				let numberStr = intNumber.split('')
				let len = numberStr.length
				for (let i = len - 1; i > -1; i--) {
					if (!(((len - 1) - i) % 3) && i !== (len - 1)) {
						str = (',' + str)
					}
					str = (numberStr[i] + str)
				}
				return str + '.' + floatNumber
			}
		},
		onLoad() {
			let timer = setTimeout(() => {
				clearTimeout(timer)
				this.$store.commit('UPDATE_TABBAR_VISIBLE_TYPE', 'user')
			}, 100)
		},
		onShow() {
			// 更新状态
			let { dispatch } = this.$store;
			dispatch('initUserData')
			dispatch('updateUserInfo')
			merchantLastApproveInfo({}).then((data) => {
				let { approveStatus } = data || {}
				this.approveStatus = approveStatus
			})
		},
		methods: {
			// 触发【个人中心】选项，执行
			async changePersonConfig(item) {
				let {
					page,
					key,
					labelKey
				} = item
				if (item.page) {
					this.jumpUrl(item.page)
				} else {
					if (labelKey === 'transformShop') {
						userInitMerchant({}).then(() => {
							this.$store.dispatch('updateShopInfo')
							this.$store.commit('UPDATE_TABBAR_VISIBLE_TYPE', 'shop')
							uni.switchTab({
								url: '/pages/tabbar/shop/personal/personal'
							})
						})
					} else if (key === 'contact') {
						this.settingValue = await this.callAction(this.contactPhone)
					}
				}
			},
			// 处理图片
			dealImg(key = '') {
				return require(`@/static/image/personal/${key}@2x.png`)
			},
			// 点击签到触发
			signAction() {
				let { dispatch } = this.$store
				dispatch('updateSign').then(() => {
					dispatch('initUserData')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		width: 100vw;
		background-color: #F9F9F9;
	}

	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10200;
		width: 750rpx;
		height: calc(var(--status-bar-height) + 396rpx);
		color: #FFFFFF;
		background: linear-gradient(to top, #263249 0%, #4E464B 100%, #4E464B 100%);
		;
	}

	.header::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -110rpx;
		z-index: -1;
		width: 100%;
		height: 110rpx;
		background-color: #f9f9f9;
	}

	.sign-btn {
		position: absolute;
		right: 0;
		padding: 12rpx 38rpx 10rpx 20rpx;
		color: #333333;
		background-color: #FFFFFF;
		border-top-left-radius: 100rpx;
		border-bottom-left-radius: 100rpx;
		transition: .3s all;
	}

	.personal {
		&-avatar {
			width: 99rpx;
			height: 99rpx;
			border: 2rpx solid #FFFFFF;
		}
	}

	.header-card {
		padding: 0 30rpx;
		width: 670rpx;
		height: 270rpx;
		color: #333333;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.header-nav {
		position: relative;
		top: 0;
		left: 0;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 2rpx;
			height: 45rpx;
			background-color: #979797;
		}
	}


	.nav-card {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
	}
</style>
